<script setup>
import {
    Edit,
    Delete,
ElementPlus
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import * as admin from '@/api/admin.js'
import {ElMessageBox} from 'element-plus'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Plus } from '@element-plus/icons-vue'

import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();
import { ElMessage } from 'element-plus';

// 用户信息模型
const user = ref({
    img: 'https://img01.yzcdn.cn/vant/cat.jpeg',     // 头像地址
  username: '',   // 用户名
  password: '',   // 密码
  sex: '',        // 性别
  phone: '',      // 电话
  address: '',    // 地址
  building: '',   // 楼栋
});

const updateUserInfo = async()=>{
  console.log(user.value)
  const res = await admin.updateUser(user.value)
  if(res.code === 0){
    ElMessage.success(res.msg? res.msg:'修改成功');
  }

}

const woryTypeList = ref([])
const typeList = async () => {
    const param = {
        currentPage: '1'
    }
    const res = await admin.finRepairtype(param)
    woryTypeList.value = res.data
    console.log(woryTypeList.value)
}
const userData = async () => {
    const res = await admin.finUserData();
    if (res.code === 0) {
        user.value = res.data
    }
}

const uploadSuccess = (result)=>{
    user.value.img = result.data;
}
typeList();
userData();

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>个人中心</span>
      </div>
    </template>

    <!-- 头像展示 -->
    <div class="profile-info">
      <!-- <el-avatar size="300" :src="user.avatar"></el-avatar>
      <el-button size="medium" type="primary" @click="handleUploadAvatar">更换头像</el-button> -->
      <el-form-item label="头像">
        <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
        action="http://localhost:8080/upload/image"
        name="file"
        :headers="{'Authorization':tokenStore.token}"
        :on-success="uploadSuccess"
        >
            <img v-if="user.img" :src="user.img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
    </el-form-item>
    </div>

    <!-- 用户信息展示 -->
    <el-form :model="user" label-width="120px" class="user-form">
      <el-form-item label="用户名">
        <el-input v-model="user.name" placeholder="请输入用户名" size="large"/>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="user.password" type="password" placeholder="请输入密码" size="large"/>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="user.sex" size="large">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="电话">
        <el-input v-model="user.phone" placeholder="请输入电话号码" size="large"/>
      </el-form-item>

      <el-form-item label="地址">
        <el-input v-model="user.address" placeholder="请输入地址" size="large"/>
      </el-form-item>

      <el-form-item label="楼栋" v-if="user.role === 'user'">
        <el-input v-model="user.number" type="number" placeholder="请输入楼栋号" size="large"/>
      </el-form-item>

      <!-- <el-form-item label="工种" v-if="user.role === 'workers'">
          <el-select v-model="user.worktype" placeholder="请选择工种">
              <el-option v-for="item in woryTypeList"
              :label="item.typeName"
              :value="item.typeName"></el-option>
          </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" size="large" @click="updateUserInfo">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .profile-info {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .el-avatar {
      margin-right: 20px;
    }

    .el-button {
      margin-top: 10px;
    }
  }

  .user-form .el-input {
    font-size: 16px;
  }

  .user-form .el-button {
    font-size: 16px;
  }
  .avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}
}
</style>
